<template>
  <v-container class="white" style="min-height: 95vh;">
    <v-app-bar app elevation="0" dense color="white">
        <v-btn icon @click="$router.go(-1)">
            <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
        <v-toolbar-title class="text-center flex-grow-1 subtitle-1">登录</v-toolbar-title>
        <v-btn plain text :ripple="false">
        </v-btn>
    </v-app-bar>

    <h3 class="text-center white col-12 mt-4">
        <v-img :src="login_logo" contain height="150" style="display:inline-block;height:150px"></v-img>
    </h3>
    <v-window v-model="win">
        <v-window-item value="password">
            <v-card class="mt-2" flat>
                <v-form ref="form"  @keyup.native.enter="doLogin" class="pa-2">
                    <v-text-field
                        label="手机号码"
                        v-model="mobile"
                        clearable
                        type="text">
                    </v-text-field>
                    <v-text-field
                        id="password"
                        v-model="password"
                        clearable
                        label="密码"
                        @click:append="showPassword = !showPassword"
                        :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                        :type="showPassword ? 'text' : 'password'"
                    ></v-text-field>
                    <v-checkbox
                        v-model="isTermsAgreed"
                    >
                        <template #label>
                            我已阅读并同意
                            <a href="javascript:void(0)" @click="goToTermsPage">用户注意条款</a>
                        </template>
                    </v-checkbox>
                </v-form>
                <v-card-actions>
                    <v-btn depressed block rounded large  color="primary" :loading="loading" @click="doLogin()">登录</v-btn>
                </v-card-actions>
            </v-card>
        </v-window-item>
        <v-window-item value="smscode">
            <v-card class="mt-2" flat>
                <v-form ref="formBySms"  @keyup.native.enter="doLoginSms" class="pa-2">
                    <v-text-field
                        label="手机号码"
                        v-model="mobile"
                        clearable
                        type="text">
                    </v-text-field>
                    <v-text-field
                        id="smscode"
                        v-model="sms_code"
                        clearable
                        label="验证码"
                        type="text"
                    >
                        <template v-slot:append>
                            <span v-if="count_down == 0"  class="poiner" style="font-size:14px;"  @click="sendSms"> 发送短信 </span>
                            <span v-if="count_down > 0" style="font-size:14px;" > {{count_down}} 秒 </span>
                        </template>
                    </v-text-field>
                    <v-checkbox
                        v-model="isTermsAgreed"
                    >
                        <template #label>
                            我已阅读并同意
                            <a href="javascript:void(0)" @click="goToTermsPage">用户注意条款</a>
                        </template>
                    </v-checkbox>
                </v-form>
                <v-card-actions>
                    <v-btn depressed block rounded large color="primary" :loading="loading" @click="doLoginSms()">登录</v-btn>
                </v-card-actions>
            </v-card>
        </v-window-item>
    </v-window>

    <v-row class="mt-1">
        <v-col cols="6" >
            <v-btn text plain color="primary" @click="win = (win == 'smscode') ? 'password' : 'smscode'">
                {{(win == 'smscode') ? '密码登录' : '验证码登录'}}
            </v-btn>
        </v-col>
         <v-col cols="6" class="text-right">
            <v-btn text plain color="primary" :to="`/signup`">注册</v-btn>
        </v-col>
    </v-row>

  </v-container>
</template>


<script>
    import axios from "axios";

    export default {
        data: () => ({
            isTermsAgreed: false,
            login_logo: '',
            mobile: '',
            password: '',
            showPassword: false,
            sms_code: '',
            loading: false,
            win: 'password',
            rules: {
              required: value => !!value || '必填',
            },
            count_down: 0
        }),
        created() {
            this.loadLl()
        },
        computed: {
        },
        methods: {
            goToTermsPage() {
                this.$router.push('/user/about');
            },
            loadLl() {
                axios.get(`/v1/home`).then((response) => {
                    this.login_logo = response.data.data.login_logo;
                })
                    .catch(function () {})
                    .then(function () {});
            },
            sendSms() {
                if (!(/^1\d{10}$/.test(this.mobile))) {
                    this.$toasted.show("手机号码不正确", {type: "error"});;
                    return;
                }

                const that = this;
                that.count_down = 60;
                axios.post("/v1/login/send-sms", {
                    mobile: this.mobile,
                }).then((response) => {
                    if (response.data.code == 0) {
                        that.countDown();
                    } else {
                       that.$toasted.show(response.data.msg, {type: "error"});
                    }
                }).catch(function () {})
                .then(function () {
                });
            },

            countDown() {
                const that = this;
                setTimeout(function(){
                    that.count_down--;
                    if(that.count_down>0) {
                        that.countDown();
                    }
                }, 1000)
            },

            doLoginSms() {
               if (!this.$refs.formBySms.validate()) {
                  return;
                }
                if(!this.isTermsAgreed){
                    this.$toasted.show('用户注意条款未同意', {type: "error"});
                    return;
                }
                const that = this;
                that.loading = true;
                axios.post("/v1/login/by-sms", {
                    mobile: this.mobile,
                    sms_code: this.sms_code,
                }).then((response) => {
                    if (response.data.code == 0) {
                        that.$store.dispatch("user", response.data.data);
                        that.$store.dispatch("token", response.data.data.token);
                        that.$router.replace({ path: `/` });
                        that.$toasted.show('登录成功');
                    } else {
                        that.$toasted.show(response.data.msg, {type: "error"});
                    }

                }).catch(function () {})
                .then(function () {
                    that.loading = false;
                });
            },

            doLogin() {
              if (!this.$refs.form.validate()) {
                  return;
              }
              if(!this.isTermsAgreed){
                  this.$toasted.show('用户注意条款未同意', {type: "error"});
                  return;
              }
              const that = this;
              that.loading = true;
              axios.post("/v1/login", {
                  mobile: this.mobile,
                  password: this.password,
              }).then((response) => {
                if (response.data.code == 0) {
                  that.$store.dispatch("user", response.data.data);
                  that.$store.dispatch("token", response.data.data.token);
                  that.$router.replace({ path: `/` });
                  that.$toasted.show('登录成功');
                } else {
                  that.$toasted.show(response.data.msg, {type: "error"});
                }
              }).catch(function () {})
              .then(function () {
                  that.loading = false;
              });
            },
        }
    }
</script>

<style scoped>
.poiner {
    cursor: pointer;
}
</style>
